<template>
  <div class="product">
    <!-- <img src="../assets/page/product.jpg" alt=""> -->
    <div class="pro1">
      <div class="text">
        <img src="../assets/pro1text.png" alt="">
        <div class="order">
          <span class="l">售价:￥</span>
          <span class="r">970<em>元/大盒(24g)</em> </span>
          <button class="btn" @click="salesBuy()">立即抢购</button>
        </div>
      </div>
      <img src="../assets/page/pro1.jpg" alt="">
    </div>
    <img src="../assets/page/pro2.jpg" alt="">
    <!-- <div class="liji" @click="buy()"></div> -->
    <!-- 产品页价格 -->
    <!-- <div class="price">700</div> -->
    <!-- 产品页价格 -->

  </div>
</template>

<script>
  export default {
    methods: {
      salesBuy() {
        console.log(Date());
        window.open('https://qujiao.tmall.com/', '_blank');
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .product {
    position: relative;
    text-align: center;
    min-height: 400px;
    max-width: 840px;
    margin: 0 auto;
    img {
      display: inline-block;
      margin: 0 0 -4px 0;
      width: 100%;
    }
    .pro1 {
      position: relative;
      width: 100%;
      display: inline-block;
      .text{
        background: rgba(206, 163, 36, .8);
        border-radius: 10px;
        width: 94%;
        height: 21%;
        position: absolute;
        bottom: 5%;
        left: 3%;
        text-align: left;

        img {
          width: 55%;
          display: inline-block;
          margin: 2%;
        }
      }
      img{
        width: 100%;
      }
    }
  }

  .liji {
    position: absolute;
    position: absolute;
    width: 130px;
    height: 40px;
    top: 520px;
    right: 460px;
    cursor: pointer;
  }

  .price {
    position: absolute;
    width: 65px;
    height: 35px;
    top: 520px;
    right: 738px;
    line-height: 35PX;
    font-size: 38px;
    text-align: right;
    font-weight: bold;
    color: white;
    background-color: transparent;
  }

.btn {
    background: white;
    padding: 0.28em 0.8em 0.29em;
    display: inline-block;
    color: #6e4400;
    text-decoration: none;
    border-radius: 10px;
    margin: 10px 0 0 15px;
    border: 1px solid transparent;
    font-size: 17px;
    outline: none;
    cursor: pointer;
    margin-left: 6px;
    font-weight: bold;
    &:hover{
      color:  white;
      border-color:transparent;
      background: #6e4400;
    }
}

@media only screen and (min-width: 1680px) {
  .order{
    font-size: 16px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r{
      font-size: 45px;
      em{
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}
@media only screen and (min-width: 1570px) and (max-width: 1680px) {
  .order{
    font-size: 16px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r{
      font-size: 45px;
      em{
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1570px) {
  .order{
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 3%;
    top: 36%;
    .r{
      font-size: 38px;
      em{
        font-size: 15px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 21px;
    }
  }
}

@media only screen and (max-width: 1440px) {
  .order{
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 40%;
    .r{
      font-size: 30px;
      em{
        font-size: 14px;
        font-style: normal;
      }
    }
  }
}

@media only screen and (max-width: 540px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 0;
    .r {
      font-size: 30px;
      em {
        font-size: 14px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 16px;
      margin-left: 1px;
    }
  }
}

@media only screen and (max-width: 420px) {
  .order {
    top: 4px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 24px;
    }
    .btn {
      padding: 0.18em 0.6em 0.19em;
      font-size: 15px;
    }
  }
}
@media only screen and (max-width: 375px) {
  .order {
    top: 0px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}

@media only screen and (max-width: 360px) {
  .order {
    top: -1px;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}
</style>
